<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人导航页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            color: #333;
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
            font-weight: 600;
            color: #2c3e50;
        }

        h2 {
            color: #333;
            margin-bottom: 15px;
        }

        h3 {
            color: #555;
            margin-bottom: 10px;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 500;
            transition: background-color 0.2s ease;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .btn:hover {
            background: #0056b3;
        }



        .category-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .category-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            overflow: hidden;
            transition: border-color 0.2s ease;
        }

        .category-card:hover {
            border-color: #007bff;
        }

        .category-header {
            background: #f8f9fa;
            color: #333;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #e9ecef;
        }

        .category-icon {
            font-size: 1.2rem;
        }

        .category-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
            color: #2c3e50;
        }

        .nav-items {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-item {
            border-bottom: 1px solid #f1f3f4;
            width: 270px;
            float: left;
        }

        .nav-item:last-child {
            border-bottom: none;
        }

        .nav-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #333;
            gap: 12px;
            padding: 12px 20px;
            transition: background-color 0.2s ease;
        }

        .nav-link:hover {
            background: #f8f9fa;
        }

        .nav-icon {
            font-size: 1rem;
            width: 20px;
            height: 20px;
            text-align: center;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .text-icon {
            width: 16px;
            height: 16px;
            background: #007bff;
            color: white;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
        }
        
        .loading-icon {
            font-size: 12px;
            color: #6c757d;
        }

        .nav-title {
            font-weight: 500;
            margin-bottom: 2px;
            font-size: 14px;
        }

        .nav-description {
            font-size: 12px;
            color: #6c757d;
        }

        /* 分组版本信息样式 */
        .version-info {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }

        .version-header h2 {
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .version-header p {
            color: #6c757d;
            font-size: 14px;
        }

        /* 分组卡片样式 */
        .group-count {
            background: #007bff;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: auto;
        }

        .group-description {
            color: #6c757d;
            font-size: 12px;
            margin-bottom: 0;
            font-style: italic;
        }


        @media (max-width: 768px) {
            .actions {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            .category-grid {
                gap: 15px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .nav-link {
                padding: 10px 16px;
            }
            
            .category-header {
                padding: 12px 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>个人导航页面</h1>
        </header>

        <!-- 操作按钮 -->
        <div class="actions">
            <a href="/import" class="btn">导入浏览器数据</a>
            <a href="/test-extension" class="btn">🧪 扩展测试</a>
            <a href="/stat" class="btn">📊 统计数据</a>
            <a href="/ai-grouping" class="btn">🤖 AI智能分组</a>
            <a href="/download" class="btn">📦 下载安装包</a>
        </div>


        <!-- 导航分类 -->
        <div class="category-grid" id="categoriesContainer">
            <!-- 分类将通过JavaScript动态加载 -->
        </div>
    </div>

    <script>
        // 获取网站图标
        function getWebsiteIcon(url, title) {
            try {
                const urlObj = new URL(url);
                const domain = urlObj.hostname;
                
                // 尝试获取favicon
                const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
                
                // 创建图片元素来测试favicon是否可用
                const img = new Image();
                img.onload = function() {
                    // favicon加载成功，更新图标
                    const iconElement = document.querySelector(`[data-url="${url}"] .nav-icon`);
                    if (iconElement) {
                        iconElement.innerHTML = `<img src="${faviconUrl}" alt="" style="width: 16px; height: 16px; border-radius: 2px;">`;
                    }
                };
                img.onerror = function() {
                    // favicon加载失败，使用标题第一个字符
                    const iconElement = document.querySelector(`[data-url="${url}"] .nav-icon`);
                    if (iconElement) {
                        const firstChar = getFirstCharacter(title || domain);
                        iconElement.innerHTML = `<span class="text-icon">${firstChar}</span>`;
                    }
                };
                img.src = faviconUrl;
                
                // 返回临时图标（在favicon加载完成前显示）
                return '<span class="loading-icon">⏳</span>';
            } catch (e) {
                // URL解析失败，使用标题第一个字符
                return getFirstCharacter(title || '?');
            }
        }
        
        // 获取标题第一个字符
        function getFirstCharacter(text) {
            if (!text) return '?';
            
            // 去除空格和特殊字符，获取第一个有效字符
            const cleanText = text.trim().replace(/[^\w\u4e00-\u9fa5]/g, '');
            if (cleanText.length === 0) return '?';
            
            const firstChar = cleanText.charAt(0).toUpperCase();
            
            // 如果是中文字符，直接返回
            if (/[\u4e00-\u9fa5]/.test(firstChar)) {
                return firstChar;
            }
            
            // 如果是英文字符，返回大写字母
            if (/[A-Za-z]/.test(firstChar)) {
                return firstChar;
            }
            
            // 其他情况返回问号
            return '?';
        }
        
        // 获取导航数据
        async function loadNavigationData() {
            try {
                // 首先尝试获取分组数据
                const groupingResponse = await fetch('/api/active-grouping');
                if (groupingResponse.ok) {
                    const groupingData = await groupingResponse.json();
                    if (groupingData.code === 200) {
                        // 使用分组数据渲染
                        renderGroupedData(groupingData.data);
                        return;
                    }
                }
                
                // 如果没有分组数据，使用默认导航数据
                const navResponse = await fetch('/api/navigation');
                const navData = await navResponse.json();
                
                // 渲染分类
                renderCategories(navData.data.categories);
            } catch (error) {
                console.error('加载数据失败:', error);
            }
        }
        
        // 渲染分类
        function renderCategories(categories) {
            const container = document.getElementById('categoriesContainer');
            container.innerHTML = '';
            
            categories.forEach(category => {
                const categoryCard = document.createElement('div');
                categoryCard.className = 'category-card';
                categoryCard.innerHTML = 
                    '<div class="category-header">' +
                        '<span class="category-icon">' + category.icon + '</span>' +
                        '<h3 class="category-title">' + category.name + '</h3>' +
                    '</div>' +
                    '<ul class="nav-items">' +
                        category.items.map(item => 
                            '<li class="nav-item">' +
                                '<a href="' + item.url + '" class="nav-link" target="_blank" data-url="' + item.url + '">' +
                                    '<span class="nav-icon">' + getWebsiteIcon(item.url, item.name) + '</span>' +
                                    '<div>' +
                                        '<div class="nav-title">' + item.name + '</div>' +
                                        '<div class="nav-description">' + item.description + '</div>' +
                                    '</div>' +
                                '</a>' +
                            '</li>'
                        ).join('') +
                    '</ul>';
                container.appendChild(categoryCard);
            });
        }

        // 渲染分组数据
        function renderGroupedData(data) {
            const container = document.getElementById('categoriesContainer');
            container.innerHTML = '';
            
            // 添加分组版本信息
            const versionInfo = document.createElement('div');
            versionInfo.className = 'version-info';
            versionInfo.innerHTML = 
                '<div class="version-header">' +
                    '<h2>AI分组导航 - ' + data.version.name + '</h2>' +
                    '<p>' + (data.version.description || '基于AI分析的个性化分组') + '</p>' +
                '</div>';
            container.appendChild(versionInfo);
            
            // 渲染分组
            data.groups.forEach(groupData => {
                const group = groupData.group;
                const urls = groupData.urls;
                
                const groupCard = document.createElement('div');
                groupCard.className = 'category-card';
                groupCard.style.borderLeft = '4px solid ' + group.color;
                groupCard.innerHTML = 
                    '<div class="category-header">' +
                        '<span class="category-icon">' + group.icon + '</span>' +
                        '<h3 class="category-title">' + group.name + '</h3>' +
                        '<span class="group-count">' + urls.length + '个网站</span>' +
                    '</div>' +
                    '<div class="group-description">' + (group.description || '') + '</div>' +
                    '<ul class="nav-items">' +
                        urls.map(url => 
                            '<li class="nav-item">' +
                                '<a href="' + url.url + '" class="nav-link" target="_blank" data-url="' + url.url + '">' +
                                    '<span class="nav-icon">' + getWebsiteIcon(url.url, url.title || url.domain) + '</span>' +
                                    '<div>' +
                                        '<div class="nav-title">' + (url.title || url.domain) + '</div>' +
                                        '<div class="nav-description">' + url.domain + ' - 访问' + url.visitCount + '次</div>' +
                                    '</div>' +
                                '</a>' +
                            '</li>'
                        ).join('') +
                    '</ul>';
                container.appendChild(groupCard);
            });
        }
        

        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', function() {
            loadNavigationData();
        });
    </script>
</body>
</html>